﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StyleTestSample.aspx.cs" Inherits="Web.StyleTestSample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
<script type="text/javascript" src="Javascript/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="Javascript/RiaFrame_Base.js"></script>
<link type="text/css" rel="Stylesheet" href="App_Themes/NewPage/Styles/layout.css" />
    <style>
    .top_toolbar ul{ list-style-type:none; height:50px;}
    .top_toolbar li{ float:left; margin-right:5px;}
  
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <!--button样式-->
         <input type="button" value="新增" class="jq-input-ok" />
                     <input type="button" value="你大爷" disabled="disabled" class="jq-input-ok" />
                <input type="button" value="新增" class="jq-input" />
              
          
    <div class="sch_bar editTable">
        <ul>
         <li style=" width:100px;">
            <select class="edit_select">
              <option>条件1</option>
              <option>条件2</option>
            </select>
          </li>
          <li style=" width:100px;">
            <select class="edit_select">
              <option>条件1</option>
              <option>条件2</option>
            </select>
          </li>
          <li style="width:160px; text-align:right;">
            <input type="text" width="150px" style="font-family:'微软雅黑', '宋体', Candara; font-size:12px; color:#666;" />
          </li>
          <li style=" width:42px;">
          <a runat=server></a>
            <%--<input type="button" class="toolbar_schBt" onmouseover="this.className='toolbar_schBtOver'" onmouseout="this.className='toolbar_schBt'" />--%>
          </li>
          </ul>
          </div>
          
    
    
    <div class="tableArea">
    <asp:GridView runat="server" ID="gv1" class="mainListTb" AutoGenerateColumns="false" Width="100%">
    <Columns>
    <asp:TemplateField>
    <HeaderStyle Width="20%"/>
    <HeaderTemplate>单位</HeaderTemplate>
    <ItemTemplate><%#Eval("bumen1") %></ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderStyle Width="20%"/>
    <HeaderTemplate>单位</HeaderTemplate>
    <ItemTemplate><%#Eval("bumen1") %></ItemTemplate>
    </asp:TemplateField>
    
    <asp:TemplateField>
    <HeaderStyle Width="20%"/>
    <HeaderTemplate>操作</HeaderTemplate>
    <ItemTemplate><input type="button" class="table_button" value="签收"  /></ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderStyle Width="20%"/>
    <HeaderTemplate>单位</HeaderTemplate>
    <ItemTemplate><%#Eval("bumen1") %></ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField>
    <HeaderStyle Width="20%"/>
    <HeaderTemplate>单位</HeaderTemplate>
    <ItemTemplate><%#Eval("bumen1") %></ItemTemplate>
    </asp:TemplateField>   
    </Columns>
    </asp:GridView>
    </div>

    <p>
        &nbsp;</p>
    <p>
        &nbsp;edit第一种做法</p>
        <!--edit-->
       <table cellpadding="0" cellspacing="0" width="100%"  align="center">
          <tr>
            <td class="td_forTitle" width="15%">用户标识<span style=" font-weight: bold; color:red; text-align:center; padding: 0px 1px;">*</span></td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <td class="td_forTitle" width="15%">用户姓名</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <td class="td_forTitle" width="15%">cnpc登录名</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <td class="td_forTitle" width="15%">OA登录名</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <td class="td_forTitle" width="15%">性别</td>
            <td class="td_forIp" width="35%"><select class="edit_select">
                <option>男</option>
                <option>女</option>
              </select></td>
            <td class="td_forTitle" width="15%">年龄</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <td class="td_forTitle" width="15%">移动电话</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <td class="td_forTitle" width="15%">固定电话</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <td class="td_forTitle" width="15%">邮政编码</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <td class="td_forTitle" width="15%">地址</td>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
        </table>
  
         <p>
        &nbsp;edit第二种做法</p>
        <!--edit-->
       <table cellpadding="0" cellspacing="0" width="100%" class="editTable" align="center">
          <tr>
          <!--文字描述单元格用th标签-->
            <th width="15%">用户标识<span style=" font-weight: bold; color:red; text-align:center; padding: 0px 1px;">*</span></th>
            <!--输入单元格用td标签-->
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <th width="15%">用户姓名</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <th width="15%">cnpc登录名</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <th width="15%">OA登录名</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <th width="15%">性别</th>
            <td class="td_forIp" width="35%"><select class="edit_select">
                <option>男</option>
                <option>女</option>
              </select></td>
            <th width="15%">年龄</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <th width="15%">移动电话</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <th width="15%">固定电话</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
          <tr>
            <th width="15%">邮政编码</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
            <th width="15%">地址</th>
            <td class="td_forIp" width="35%"><input type="text" class="edit_input" /></td>
          </tr>
        </table>
        <br />
        <span>按钮的样式</span>
  <div class="top_toolbar" style=" float:right;">
  <ul>
  <li>
  <asp:Button runat="server" Text="按钮" class=" toolbar_button" onmouseover="this.className='toolbar_buttonOver'" onmouseout="this.className='toolbar_button'"/>
  </li>
  <li class="cut"></li>
  <li>
  <asp:Button ID="Button1" runat="server" Text="按钮" onmouseover="this.className='toolbar_buttonOver'" onmouseout="this.className='toolbar_button'"/>
  </li>
  </ul>
  </div>
      </form>
</body>
</html>
